<template>
	<view class="container">
		<view class="floating-search-btn" @click="openSearchPopup">
			<u-icon name="search" color="#00B54E" size="25"></u-icon>
			<text>搜索</text>
		</view>

		<view v-for="(item, index) in list" :key="index" class="list-item" @click="goToDetail(item.id)">
			<view class="item-line">
				<text class="label">账号:</text>
				<text class="value">{{ item.account }}</text>
			</view>
			<view class="item-line">
				<text class="label">生产主体:</text>
				<text class="value">{{ item.entityName }}</text>
			</view>
			<view class="item-line">
				<text class="label">法人名称:</text>
				<text class="value">{{ item.legalPerson }}</text>
			</view>
			<view class="item-line">
				<text class="label">主体地址:</text>
				<text class="value">{{ item.entityAddress }}</text>
			</view>
			<view class="item-line">
				<text class="label">食用农产品名称:</text>
				<text class="value">{{ item.productName }}</text>
			</view>
			<view class="item-line">
				<text class="label">重量(数量):</text>
				<text class="value">{{ item.weight }}</text>
			</view>
			<view class="item-line">
				<text class="label">合格方式:</text>
				<text class="value">{{ item.qualifiedStyle }}</text>
			</view>
			<view class="item-line">
				<text class="label">开具时间:</text>
				<text class="value">{{ item.createTime }}</text>
			</view>
			<view class="arrow-icon">
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</view>
		</view>
		<u-loadmore :status="status" />

		<u-popup :show="showSearchPopup" mode="center" width="85%" round="16">
			<view class="popup-content">
				<view class="form-item">
					<u-checkbox :custom-style="{ flexShrink: 0 }" @change="accountChange" />
					<text class="form-label">账号</text>
					<u-input v-model="searchForm.account" :disabled="!enableChecked.accountEnabled" placeholder="请输入账号" class="form-input"
						:input-style="inputStyle" />
				</view>
				<view class="form-item">
					<u-checkbox :custom-style="{ flexShrink: 0 }" @change="productNameChange" />
					<text class="form-label">食用农产品名称</text>
					<u-input v-model="searchForm.productName" :disabled="!enableChecked.productNameEnabled" placeholder="请输入名称" class="form-input"
						:input-style="inputStyle" />
				</view>
				<view class="form-item">
					<u-checkbox :custom-style="{ flexShrink: 0 }" @change="certNoChange" />
					<text class="form-label">合格证编号</text>
					<u-input v-model="searchForm.certNo" :disabled="!enableChecked.certNoEnabled" placeholder="请输入编号" class="form-input"
						:input-style="inputStyle" />
				</view>
				<view class="form-item">
					<u-checkbox :custom-style="{ flexShrink: 0 }" @change="agencyChange" />
					<text class="form-label">检测机构</text>
					<u-input v-model="searchForm.agency" :disabled="!enableChecked.agencyEnabled" placeholder="请输入机构名称" class="form-input"
						:input-style="inputStyle" />
				</view>
				<view class="form-item">
					<u-checkbox :custom-style="{ flexShrink: 0 }" @change="qualifiedStyleChange" />
					<text class="form-label">合格方式</text>
					<view class="form-input" @click="openActionSheet">
						<text>{{ searchForm.qualifiedStyle || '请选择' }}</text>
						<u-icon name="arrow-down-fill" color="#c0c4cc" size="20"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<u-checkbox :custom-style="{ flexShrink: 0 }" @change="dateChange" />
					<text class="form-label">开具日期</text>
					<view class="form-input" @click="openDatePicker">
						{{ dateRangeText }}
					</view>
				</view>

				<u-button type="success" @click="handleSearch">搜索</u-button>
			</view>
		</u-popup>

		<u-calendar :show="showDatePicker && enableChecked.dateEnabled" :minDate="minDate" :maxDate="maxDate" mode="range" :monthNum="13"
			@close="showDatePicker = false" @confirm="onDateConfirm" color="#00B54E" :allowSameDay="true"></u-calendar>

		<u-action-sheet :show="showActionSheet && enableChecked.qualifiedStyleEnabled" :actions="actionSheetList" @select="selectClick"
			closeOnClickAction="true" @click="onActionSheetSelect" @close="showActionSheet = false"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				status: 'loadmore',
				page: 1,
				showSearchPopup: false,
				showActionSheet: false,
				showDatePicker: false,
				minDate: this.getCurrentDate(1),
				maxDate: this.getCurrentDate(0),
				defaultDate: [this.getCurrentDate(0), this.getCurrentDate(0)],
				date: {
					startDate: undefined,
					endDate: undefined
				},
				enableChecked: {
					accountEnabled: false,
					productNameEnabled: false,
					certNoEnabled: false,
					agencyEnabled: false,
					qualifiedStyleEnabled: false,
					dateEnabled: false
				},
				searchForm: {
					account: '',
					productName: '白菜',
					certNo: '',
					agency: '',
					qualifiedStyle: '自我检测合格',
					startDate: '2023-08-08',
					endDate: '2023-08-09'
				},
				actionSheetList: [{
						name: '自我检测合格'
					},
					{
						name: '委托检测合格'
					},
					{
						name: '官方抽检合格'
					}
				],

				inputStyle: {
					minHeight: 'auto',
					height: 'auto',
					lineHeight: 'normal',
					fontSize: '28rpx'
				}
			};
		},
		computed: {
			dateRangeText() {
				console.log('开始时间:' + this.searchForm.startDate + '\n结束时间:' + this.searchForm.endDate);
				if (this.searchForm.startDate && this.searchForm.endDate) {
					return `${this.searchForm.startDate} ~ ${this.searchForm.endDate}`;
				}
				return '请选择日期范围';
			}
		},
		onLoad() {
			this.fetchList();
		},
		onReachBottom() {
			if (this.status === 'nomore') return;
			this.page++;
			this.fetchList();
		},
		methods: {
			openSearchPopup() {
				this.showSearchPopup = true;
			},
			fetchList() {
				const params = {
					page: this.page,
					pageSize: 5,
					productName: undefined,
					account: undefined,
					certNo: undefined,
					agency: undefined,
					qualifiedStyle: undefined,
					startDate: undefined,
					endDate: undefined
				};
				if (this.enableChecked.productNameEnabled && this.searchForm.productName) params.productName = this.searchForm
					.productName;
				if (this.enableChecked.accountEnabled && this.searchForm.account) params.account = this.searchForm.account;
				if (this.enableChecked.certNoEnabled && this.searchForm.certNo) params.certNo = this.searchForm.certNo;
				if (this.enableChecked.agencyEnabled && this.searchForm.agency) params.agency = this.searchForm.agency;
				if (this.enableChecked.qualifiedStyleEnabled && this.searchForm.qualifiedStyle) params.qualifiedStyle = this
					.searchForm.qualifiedStyle;
				if (this.enableChecked.dateEnabled) {
					params.startDate = this.searchForm.startDate;
					params.endDate = this.searchForm.endDate;
				}
				console.log('搜索参数:', params);

				this.status = 'loading';
				const mockData = [{
						id: 1,
						account: '18408246666',
						entityName: '六六六生产主体',
						legalPerson: '六六六',
						entityAddress: '众创空间',
						productName: '白菜',
						weight: '100公斤',
						qualifiedStyle: '自我检测合格',
						createTime: '2023-08-08 11:41:05'
					},
					{
						id: 2,
						account: '18408246666',
						entityName: '六六六生产主体',
						legalPerson: '六六六',
						entityAddress: '众创空间',
						productName: '玉米',
						weight: '50公斤',
						qualifiedStyle: '委托检测，自我承诺',
						createTime: '2023-08-07 10:20:00'
					}
				];
				setTimeout(() => {
					if (this.page === 1) this.list = mockData;
					else this.list.push(...mockData);
					this.status = this.page > 2 ? 'nomore' : 'loadmore';
				}, 1000);
			},
			check(n, m) {
				console.log(n),
					console.log(m)
			},
			handleSearch() {
				this.showSearchPopup = false;
				this.page = 1;
				this.list = [];
				this.fetchList();
			},
			openDatePicker() {
				this.showDatePicker = true;
			},
			getCurrentDate(delYear) {
				const date = new Date();
				const year = date.getFullYear() - delYear;
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			onDateConfirm(date) {
				this.date.startDate = date[0];
				this.date.endDate = date[date.length - 1];
				this.searchForm.startDate = this.date.startDate;
				this.searchForm.endDate = this.date.endDate;
				this.showDatePicker = false;
			},
			openActionSheet() {
				this.showActionSheet = true;
			},
			selectClick(date) {
				this.searchForm.qualifiedStyle = date.name
			},
			onActionSheetSelect(index) {
				this.searchForm.qualifiedStyle = this.actionSheetList[index].text;
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/regulator/print-detail?id=${id}`
				});
			},
			accountChange(status) {
				this.enableChecked.accountEnabled = status;
			},
			productNameChange(status) {
				this.enableChecked.productNameEnabled = status;
			},
			certNoChange(status) {
				this.enableChecked.certNoEnabled = status;
			},
			agencyChange(status) {
				this.enableChecked.agencyEnabled = status;
			},
			qualifiedStyleChange(status) {
				this.enableChecked.qualifiedStyleEnabled = status;
			},
			dateChange(status) {
				this.enableChecked.dateEnabled = status;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	.floating-search-btn {
		position: fixed;
		top: 20rpx;
		right: 30rpx;
		z-index: 99;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: white;
		border-radius: 50rpx;
		border: 1px solid #00B54E;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		text {
			font-size: 26rpx;
			color: #00B54E;
			margin-left: 8rpx;
		}
	}

	.list-item {
		position: relative;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.item-line {
		display: flex;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.label {
		color: #606266;
		width: 200rpx;
	}

	.value {
		color: #303133;
	}

	.arrow-icon {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	}

	.popup-content {
		padding: 40rpx 30rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 28rpx;

		.form-label {
			color: #303133;
			margin: 0 20rpx;
			width: 180rpx;
		}

		.form-input {
			flex: 1;
			border-radius: 8rpx;
			padding: 10rpx 20rpx !important;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
		}
	}
</style>